<template>
	<huihe-skeleton v-if="loading" />
	<view class="box skeleton">
		<view class="skeleton-rect m-t10">
			<search />
		</view>

		<view class="skeleton-rect m-t10">
			<u-swiper :list="swiperList.swiper" :title="true" name="url" indicator-pos="bottomRight"></u-swiper>
		</view>

		<view class="skeleton-rect m-t30 u-flex u-flex-items-center" @click="eventTarget">
			<view style="width: 50%; height: 300rpx">热门拼团</view>
			<view style="width: 50%; height: 300rpx" class="u-flex u-flex-column">
				<view>热门拼团</view>
				<view>热门拼团</view>
			</view>
		</view>

		<view class="list u-flex flex-start flex-wrap flex-grow skeleton-rect m-t30">
			<view class="list-1">推荐商品</view>
			<view class="list-1">推荐商品</view>
			<view class="list-1">推荐商品</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import search from '@/components/search.vue';
const { proxy } = getCurrentInstance() as any;
const loading = ref(false);
loading.value = true;
setTimeout(() => {
	loading.value = false;
}, 1200);

interface MyListType {
	swiper: any[];
}
const swiperList: MyListType = reactive({
	swiper: [
		{
			url: 'https://img1.baidu.com/it/u=2589155424,717802420&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1708621200&t=5529e9a3e184415107769f6cd417b08e',
			title: '火锅',
		},
		{
			url: 'https://img0.baidu.com/it/u=1807729436,1931715529&fm=253&fmt=auto&app=138&f=JPEG?w=1006&h=500',
			title: '串串',
		},
		{
			url: 'https://img1.baidu.com/it/u=2176986863,1559353466&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=306',
			title: '西餐',
		},
	],
}) as MyListType;

const eventTarget = () => {
	uni.navigateTo({
		url: '/goods/detail',
	});
};
</script>

<style lang="scss">
.list {
	.list-1 {
		width: 50%;
	}
	.list-2 {
		width: 50%;
	}
}
</style>
